'use client'

import { FormEvent, ChangeEvent, useState } from 'react'
import Link from 'next/link'

interface FooterLink {
  name: string;
  href: string;
}

interface FooterLinks {
  shop: FooterLink[];
  info: FooterLink[];
  contact: FooterLink[];
}

const footerLinks: FooterLinks = {
  shop: [
    { name: 'Shop', href: '/shop' },
    { name: 'Blog', href: '/blog' },
    { name: 'About Us', href: '/about' },
  ],
  info: [
    { name: 'Terms & Conditions', href: '/terms' },
    { name: 'Refund & Returns', href: '/refund' },
    { name: 'Privacy Policy', href: '/privacy' },
    { name: 'Shipping Policy', href: '/shipping' },
    { name: 'FAQs', href: '/faqs' },
  ],
  contact: [
    { name: 'Wholesale', href: '/wholesale' },
    { name: 'Contact Us', href: '/contact' },
  ],
}

export default function Footer() {
  const [email, setEmail] = useState<string>('')

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    // 处理订阅逻辑
    console.log('Subscribing email:', email)
  }

  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value)
  }

  return (
    <footer className="bg-gray-900 text-white pt-16 pb-8">
      <div className="container">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
          {/* Shop Links */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Shop</h3>
            <ul className="space-y-2">
              {footerLinks.shop.map((link) => (
                <li key={link.name}>
                  <Link href={link.href} className="text-gray-400 hover:text-white">
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Quick Info */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Quick Info</h3>
            <ul className="space-y-2">
              {footerLinks.info.map((link) => (
                <li key={link.name}>
                  <Link href={link.href} className="text-gray-400 hover:text-white">
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Contact</h3>
            <ul className="space-y-2">
              {footerLinks.contact.map((link) => (
                <li key={link.name}>
                  <Link href={link.href} className="text-gray-400 hover:text-white">
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Newsletter */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Save 10% On Your First Purchase</h3>
            <p className="text-gray-400 mb-4">
              Sign up to our newsletter to receive exclusive offers.
            </p>
            <form className="space-y-4" onSubmit={handleSubmit}>
              <input
                type="email"
                placeholder="Enter your email"
                className="w-full px-4 py-2 rounded-md bg-gray-800 text-white border border-gray-700 focus:outline-none focus:border-primary"
                value={email}
                onChange={handleEmailChange}
              />
              <button type="submit" className="btn-primary w-full">
                Subscribe
              </button>
            </form>
          </div>
        </div>

        {/* Copyright */}
        <div className="border-t border-gray-800 pt-8 text-center text-gray-400">
          <p>© {new Date().getFullYear()} TOPZYN. All rights reserved.</p>
          <p className="mt-2">WARNING: NOT FOR SALE TO MINORS.</p>
        </div>
      </div>
    </footer>
  )
}
